<ion-header [translucent]="true">
  <ion-toolbar
    style="height: 3rem;background-image: url('/assets/header.jpg');"
  >
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" overflow-scroll="true">
  <div class="login-headpic">
    <ng-container *ngIf="image==null; else elseTemplate">
      <img src="/assets/root.jpg" alt="图片" />
    </ng-container>
    <ng-template #elseTemplate>
      <img [src]="image" alt="" />
    </ng-template>
    <ng-container *ngIf="uname==null; else login">
      <h3>
        <ion-button routerLink="/login" fill="clear">
          点击登录
        </ion-button>
      </h3>
    </ng-container>
    <ng-template #login>
      <h3 style="color: white;">用户 {{uname}}</h3>
    </ng-template>
  </div>
  <ion-item-group>
    <ion-item routerLink="/tabs/tab2">
      <ion-label>小说书架</ion-label>
    </ion-item>

    <ion-item>
      <ion-label routerLink="/history">阅读历史</ion-label>
    </ion-item>

    <ion-item>
      <ion-label routerLink="/contact">联系官方</ion-label>
    </ion-item>
    <ion-item>
      <ion-label (click)="banben()">版本更新</ion-label>
      <ion-button fill="clear" style="color: black;">当前版本1.1.1</ion-button>
    </ion-item>
    <ion-item *ngIf="uname!=null">
      <ion-label (click)="loginOut()">退出登录</ion-label>
    </ion-item>
  </ion-item-group>
</ion-content>
